@()(implicit request: play.api.mvc.RequestHeader)
@main("Home") {


	<style>
			.thumbnail {
				height: 250px;
			}

			.thumbnail > .row {
				margin-top: 12px;
			}

			.myFont {
				font-size: 24px;
			}

			.panel-default > .panel-heading {
				/*background:transparent;*/
			}

			.myHr {
				border-top: 2px solid #002060;
			}

		.panel-title{
			font-weight: bold;
			margin-bottom: 10px;
		}

	</style>
	<div class="row">

		<div class="col-md-9" style="margin-top: 15px">

			<h3 class="panel-title" > Database Introduction
			</h3>

			<div>
				<p class="text-justify">
					In genetics, a single-nucleotide polymorphism(snp)  is a germline substitution of a single nucleotide at a specific position in the genome. Although certain definitions require the substitution to be present in a sufficiently large fraction of the population (e.g. 1% or more), many publications do not apply such a frequency threshold.
				</p>
				<p class="text-justify">
					For example, at a specific base position in the human genome, the G nucleotide may appear in most individuals, but in a minority of individuals, the position is occupied by an A. This means that there is a SNP at this specific position, and the two possible nucleotide variations – G or A – are said to be the alleles for this specific position.
				</p>

			</div>

			<div id="root"></div>

			<div class="body-box">

				<div class="index-box">
					<div class="index-left" style="width: 100%">

						<h3 class="panel-title"> Navigation
						</h3>

						<div class="left-box">

							<a  href="@routes.DataController.toIndex">
								<div class="img-box">
									<div class="img">
										<i class="fa fa-database"></i>

									</div>
									<p>SNP Data</p>
								</div>
							</a>

							<a  href="@routes.AnnoController.toIndex">
								<div class="img-box">
									<div class="img">
										<i class="fa fa-table"></i>

									</div>
									<p>SNP Anno</p>
								</div>
							</a>

							<a href="@routes.GeneController.toIndex">
								<div class="img-box">
									<div class="img">
										<i class="fa fa-google"></i>

									</div>
									<p>SNP Gene</p>
								</div>
							</a>

							<a  href="#">
								<div class="img-box">
									<div class="img">
										<i class="fa fa-info-circle"></i>

									</div>
									<p>About us</p>
								</div>
							</a>

							<a  href="#">
								<div class="img-box">
									<div class="img">
										<i class="fa fa-send-o"></i>

									</div>
									<p>Contact us</p>
								</div>
							</a>

						</div>
					</div>
				</div>

			</div>

		</div>
		<div class="col-md-3">

			<div align="center" style="margin-top: 20px">

			</div>

		</div>

	</div>

	<script>
			$(function () {
				Home.init
			})

	</script>

}
